<template>
	<s-layout navbar="custom1" :bgStyle="template.style?.background" color='#333333'
	          onShareAppMessage>
	<view class="content">
		<assNavbar title="商家入驻" />
		<swiper  :style="{height:pageHeight + 'px'}" previous-margin="20rpx"  next-margin="20rpx">
			<swiper-item class="swiper-item" v-for="item in state.levelList" :key="item.id">
				<scroll-view class="scroll-view" scroll-y :style="{height:`calc(${pageHeight}px - 150rpx)`}">
					<image class="infoCard" :src="sheep.$url.cdn(item.info)" mode="widthFix" />
				</scroll-view>
				<button class="ss-reset-button btn" :style="{background:item.color}" @click='btnClick(item)'>
					{{state.status[item.type]&&state.status[item.type].status!=-1?state.status[item.type].status_text:'申请入驻'}}</button>
			</swiper-item>
		</swiper>
	</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import assNavbar from "@/components/ass-navbar.vue"
	import { reactive, computed, onBeforeUnmount,nextTick } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
	import merchantApi from  '@/sheep/api/merchant'
	const template = computed(() => sheep.$store('app').template?.home);
	const state = reactive({
		status:{},
		remark:'',
		levelList:[
			{
				id:0,
				type:'tg',
				color:'#34c7a8',
				info:'/storage/default/202409301446555568.png',
			},
			{
				id:1,
				type:'ds',
				color:'#fb681f',
				info:"/storage/default/202409301450488765.png",
			},
		]
	})
	let pageHeight = computed(()=>(sheep.$platform.device.safeArea.height  - 44))
	onLoad((opt)=>{
		getStatus()
	})
	function btnClick(item){
		let data = state.status[item.type]
		if(data){
			if(data.status==-1){//身份未申请时，跳转到申请页面
				uni.navigateTo({
					url:'/pages/merchant/apply',
				})
			}else if(data.status==0||data.status==2){ //身份审核中，跳转到结果页面
				uni.navigateTo({
					url:'/pages/merchant/result?status='+data.status+'&remark='+data.remark,
				})
			}else if(data.status==1){
				uni.navigateTo({
					url:'/pages/merchant/result?status='+data.status+'&remark='+data.remark,
				})
			}
		}
		
	}
	
	async function getStatus(){
	  const {data,error} = await merchantApi.getStatus();
	  if(error===0){
		  state.status = data;
		  
	  }
	}
</script>

<style lang="scss" scoped>
	.content{
		.swiper-item{
			width:750rpx;
			box-sizing: border-box;
			padding: 20rpx 7rpx;
			.scroll-view{
				.infoCard{
					margin-top: 20rpx;
					width: 100%;
				}
			}
			.btn{
				margin:20rpx auto 0;
				width: 306px;
				height: 90rpx;
				border-radius: 100px;
				background: #47DFBD;
				font-family: PingFang SC;
				font-size: 40rpx;
				font-weight: normal;
				line-height: 90rpx;
				letter-spacing: 0em;
				font-variation-settings: "opsz" auto;
				color: #FFFFFF;
			}
		}
	}
</style>